<!-- 人事-基础设置-合同提醒设置 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title" :breadCrumb="breadCrumb" showBack>
      </pageHeaderNew>
    </template>
    <main>
      <a-form autoLabelWidth>
        <section>
          <header>
            <span>新签合同提醒规则</span>
            <a-switch
              class="enable"
              :checked-value="1"
              :unchecked-value="2"
              v-model="formData.data[0].enable"
            />
          </header>
          <div class="content">
            <div>
              <a-form-item field="" hideLabel>
                新员工入职
                <a-input-number
                  style="width: 150px; margin: 0 10px"
                  allow-clear
                  hideButton
                  button-text="Search"
                  :min="1"
                  v-model="formData.data[0].first"
                >
                  <template #append>
                    <span>天</span>
                  </template>
                </a-input-number>
                后开始提醒需要签订劳动合同
              </a-form-item>
              <a-form-item field="" hideLabel>
                提醒频次为：每
                <a-input-number
                  style="width: 150px; margin: 0 10px"
                  allow-clear
                  hideButton
                  button-text="Search"
                  :min="1"
                  v-model="formData.data[0].second"
                >
                  <template #append>
                    <span>天</span>
                  </template>
                </a-input-number>
                发送提醒
                <a-input-number
                  style="width: 150px; margin: 0 10px"
                  allow-clear
                  hideButton
                  button-text="Search"
                  :min="1"
                  v-model="formData.data[0].third"
                >
                  <template #append>
                    <span>次</span>
                  </template>
                </a-input-number>
              </a-form-item>
            </div>
          </div>
        </section>
        <section>
          <header>
            <span>续签合同提醒规则</span>
            <a-switch
              class="enable"
              v-model="formData.data[1].enable"
              :checked-value="1"
              :unchecked-value="2"
            />
          </header>
          <div class="content">
            <div>
              <a-form-item field="" hideLabel>
                合同到期前
                <a-input-number
                  style="width: 150px; margin: 0 10px"
                  allow-clear
                  hideButton
                  button-text="Search"
                  :min="1"
                  v-model="formData.data[1].first"
                >
                  <template #append>
                    <span>天</span>
                  </template>
                </a-input-number>
                开始提醒续签劳动合同，并自动进入合同到期列表
              </a-form-item>
              <a-form-item field="" hideLabel>
                提醒频次为：每
                <a-input-number
                  style="width: 150px; margin: 0 10px"
                  allow-clear
                  hideButton
                  button-text="Search"
                  :min="1"
                  v-model="formData.data[1].second"
                >
                  <template #append>
                    <span>天</span>
                  </template>
                </a-input-number>
                发送提醒
                <a-input-number
                  style="width: 150px; margin: 0 10px"
                  allow-clear
                  hideButton
                  button-text="Search"
                  :min="1"
                  v-model="formData.data[1].third"
                >
                  <template #append>
                    <span>次</span>
                  </template>
                </a-input-number>
              </a-form-item>
              <a-form-item field="" hideLabel>
                已进入合同到期列表的劳动合同，到期前
                <a-input-number
                  style="width: 150px; margin: 0 10px"
                  allow-clear
                  hideButton
                  button-text="Search"
                  :min="1"
                  v-model="formData.data[1].fourth"
                >
                  <template #append>
                    <span>天</span>
                  </template>
                </a-input-number>
                自动进入合同续签列表
              </a-form-item>
            </div>
          </div>
        </section>
      </a-form>
    </main>
    <footer>
      <a-button
        class="btn"
        style="
          margin-right: 20px;
          border: 1px rgba(242, 242, 242, 1) solid;
          background-color: #fff;
        "
        @click="$router.go(-1)"
        >返回</a-button
      >
      <a-button class="btn" type="primary" @click="save">保存</a-button>
    </footer>
  </ContentCard>
</template>

<script lang="ts" setup>
import {
  GetContractRemind,
  PutContractRemind
} from '@/apis/management/contract/baseSetting';

const router = useRouter();
const title = '合同预警提醒设置';

const unitTimeEnum = ['天', '小时', '分'];

const formData = reactive({
  data: [
    // 新签合同提醒规则
    {
      first: undefined,
      second: undefined,
      third: undefined,
      fourth: undefined,
      enable: 1
    },
    // 续签合同提醒规则
    {
      first: undefined,
      second: undefined,
      third: undefined,
      fourth: undefined,
      enable: 1
    }
  ]
});

// 获取数据
const getData = async () => {
  try {
    const res = await GetContractRemind();
    formData.data = res;
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

// 保存
const save = async () => {
  try {
    await PutContractRemind({
      groups: formData.data
    });
  } catch (error: unknown) {
    console.log(error);
  }
};

// 取消
const cancel = () => {
  router.back();
};
</script>

<style scoped lang="less">
main {
  section {
    header {
      font-weight: 700;
      height: 56px;
      line-height: 56px;
      background-color: #f3f6f9;
      margin-bottom: 20px;
      .enable {
        float: right;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
      }
      &::before {
        margin-left: 10px;
        content: '';
        display: inline-block;
        width: 6px;
        height: 40%;
        margin-right: 10px;
        background: #165dff;
        position: relative;
        top: 7px;
        border-radius: 3px;
      }
    }
    .content {
      display: flex;
      justify-content: center;
    }
  }
}
footer {
  height: 60px;
  width: calc(100% - 100px);
  background-color: #fff;
  box-shadow: 1px -1px 10px 0 #cacaca;
  position: fixed;
  bottom: 0;
  left: 10%;
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    width: 120px;
    height: 40px;
    border-radius: 5px;
  }
}

:deep(.arco-input-append) {
  background-color: #eee;
}
</style>
